<template>
  <el-dialog
    v-model="dialogVisible"
    title="供应商管理"
    width="30%"
    style="min-width: 800px"
    draggable
  >
    <div>
      <span class="dialog-label">尚欠供应商款：</span>
      <span style="color: red; font-weight: bold">
        {{ "￥" }}{{ requestParam.supplier.due }}
      </span>
    </div>

    <div style="height: 20px"></div>

    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="box-2">
            <span style="font-weight: bold">* 供应商：</span>
            <!-- 选择供应商 -->
            <el-col :span="6">
              <el-button @click="goodsSupplierSelect.open(true)">
                {{ goodsSupplierOfSelect.name }}
              </el-button>
            </el-col>
          </div>
        </el-col>

        <!-- 仓库名称 -->
        <el-col :span="6">
          <div class="box-2">
            <span style="font-weight: bold">* 仓库：</span>
            <div v-show="true" style="margin-right: 5px">
              <GoodsWarehouseSelectInOne
                ref="warehouseSelect"
                @select="warehouseSelectSelect"
              />
            </div>
          </div>
        </el-col>

        <!-- 实付金额 -->
        <el-col :span="6">
          <div class="box-2">
            <span style="font-weight: bold">实付金额：</span>
            <span> {{ "￥" }}{{ requestParam.actualAmount }} </span>
          </div>
        </el-col>

        <!-- 日期 -->
        <el-col :span="6">
          <div class="box-2">
            <span style="font-weight: bold">日期：</span>
            <span>
              {{ $kt.date.format(new Date().getTime(), "yyyy-MM-dd") }}
            </span>
          </div>
        </el-col>

        <!-- 备注 -->
        <el-col :span="24">
          <div class="box-2">
            <span style="font-weight: bold">备注：</span>
            <span>
              {{ requestParam.remark }}
            </span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="height: 20px"></div>

    <el-table border :data="requestParam.inList">
      <el-table-column label="商品" width="180">
        <!-- 商品选择器 -->
      </el-table-column>

      <!-- 货号 -->
      <el-table-column label="货号" width="180"> </el-table-column>

      <!-- 条码 -->
      <el-table-column prop="goods.barCode" label="条码" width="180">
      </el-table-column>

      <!-- 数量 -->
      <el-table-column prop="number" label="数量" width="180">
      </el-table-column>

      <!-- 采购价 -->
      <el-table-column prop="goods.purchasePrice" label="采购价" width="180">
      </el-table-column>

      <!-- 折扣 -->
      <el-table-column prop="discount" label="折扣" width="180">
        <template #default="{ row }">
          <!-- {{ row.discount * 100 }}{{ "%" }} -->
          {{ $kt.decimal.mul(row.discount, 100) }}{{ "%" }}
        </template>
      </el-table-column>

      <!-- 折后价 -->
      <el-table-column prop="discountPrice" label="折后价" width="180">
        <template #default="{ row }">
          <!-- 计算 -->
          <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.discount }} -->
          {{ "￥" }}
          {{ $kt.decimal.mulAll(row.goods.purchasePrice, row.discount) }}
        </template>
      </el-table-column>

      <!-- 金额 -->
      <el-table-column prop="discountPrice" label="金额" width="180">
        <template #default="{ row }">
          <!-- 计算 -->
          <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.number }} -->
          {{ "￥" }}
          {{ $kt.decimal.mulAll(row.goods.purchasePrice, row.number) }}
        </template>
      </el-table-column>

      <!-- 折后金额 -->
      <el-table-column prop="discountPrice" label="折后金额" width="180">
        <template #default="{ row }">
          <!-- 计算 -->
          <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.discount * row.number }} -->
          {{ "￥" }}
          {{
            $kt.decimal.mulAll(
              row.goods.purchasePrice,
              row.discount,
              row.number
            )
          }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >删除</el-button
          >
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right" class="amount-box">
      <div class="amount">
        <span class="amount-label">费用金额：</span>
        <span class="amount-value">￥{{ requestParam.feeAmount }}</span>
      </div>

      <div class="amount">
        <span class="amount-label">抹零金额：</span>
        <span class="amount-value">￥{{ requestParam.zeroAmount }}</span>
      </div>

      <div class="amount">
        <span class="amount-label">总金额：</span>
        <span class="amount-value">￥{{ totalAmount }}</span>
      </div>
    </div>

    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit('draft')"> 草稿 </el-button>
        <el-button type="primary" @click="submit('purchased')">
          采购
        </el-button>
      </span>
    </template>

    <GoodsSupplierSelect
      ref="goodsSupplierSelect"
      @select="goodsSupplierSelectSelect"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose, watch } from "vue";
let dialogVisible = ref(false);
import $kt from "@/vueKantboot";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { de, fa } from "element-plus/es/locale";
import GoodsSupplierSelect from "@/components/goodsSupplierSelect/Body.vue";
import GoodsWarehouseSelect from "@/components/goodsWarehouseSelect/goodsWarehouseSelect.vue";
import GoodsWarehouseSelectInOne from "@/components/goodsWarehouseSelectOne/goodsWarehouseSelect.vue";

let requestParamStart = {
  warehouseIds: 1,
  actualAmount: 10,
  gmtCreate: 1699087258000,
  gmtModified: 1699087261000,
  id: null,
  inList: [
    {
      gmtCreate: null,
      discountPrice: 4.75,
      discount: 0.95,
      number: 1,
      gmtModified: null,
      goods: {
        barCode: null,
        brandId: null,
        children: [],
        code: null,
        descriptionJson: null,
        fileIdOfImgArrStr: "[478236600741893,478236557795333]",
        gmtCreate: 1698821086621,
        gmtModified: 1698907615672,
        id: 477940470317061,
        minOrder: null,
        name: "测试1.1",
        numberStr: null,
        parent: {
          barCode: "1111",
          brandId: null,
          children: null,
          code: null,
          descriptionJson: null,
          fileIdOfImgArrStr: "[478237718933509]",
          gmtCreate: null,
          gmtModified: 1698893659698,
          id: 2,
          minOrder: null,
          name: "测试3",
          numberStr: "1111",
          parent: null,
          parentId: null,
          price: null,
          priority: null,
          purchasePrice: null,
          retailPrice: null,
          selectList: [],
          stockWarningLower: null,
          stockWarningUpper: null,
          type: null,
          typeId: null,
          unitId: null,
          wholesalePrice: null,
        },

        parentId: 2,
        price: 5.0,
        priority: null,
        purchasePrice: 4.0,
        retailPrice: 5.0,
        selectList: [],
        stockWarningLower: null,
        stockWarningUpper: null,
        type: null,
        typeId: null,
        unitId: null,
        wholesalePrice: 5.0,
      },
      goodsId: 477940470317061,
      id: 1,
      procureOrderId: 1,
    },
  ],
  name: "1", //采购单
  order: "1", //订单
  remark: "2", //备注
  statusCode: "draft", //状态
  supplier: {
    addressCode: null,
    addressDetail: null,
    bankAccount: null,
    bankName: null,
    discount: 0.95,
    due: 100,
    dueToSupplier: {
      due: 100,
      gmtCreate: 1698978695000,
      gmtModified: null,
      id: 1001,
      supplierId: 1001,
    },
    email: null,
    gmtCreate: 1698977999905,
    gmtModified: 1698977999905,
    id: 1001,
    mobile: null,
    name: "测试01",
    phone: null,
    principalName: "方测试",
    remark: null,
    website: null,
  }, //供应商
  supplierId: 1001,
  userIdOfCreate: 1,
  warehouse: {
    empIdOfManager: null,
    empOfManager: null,
    gmtCreate: 1698739893796,
    gmtModified: 1698739893796,
    id: 477607904501765,
    name: "2号仓库",
    remark: null,
    store: null,
    storeId: null,
  },
  warehouseId: 477607904501765,
  zeroAmount: 10,
  feeAmount: 10,
};
let requestParam = ref(JSON.parse(JSON.stringify(requestParamStart)));

let totalAmount = ref(0);

/**
 * 计算总金额
 */
let getTotalAmount = () => {
  let amount = 0;
  if (!requestParam.value.inList) {
    totalAmount.value = amount;
    return amount;
  }
  for (let i = 0; i < requestParam.value.inList.length; i++) {
    amount = $kt.decimal.add(
      amount,
      $kt.decimal.mulAll(
        requestParam.value.inList[i].goods.purchasePrice,
        requestParam.value.inList[i].number,
        requestParam.value.inList[i].discount
      )
    );
  }
  // 加上费用金额
  amount = $kt.decimal.add(amount, requestParam.value.feeAmount);
  // 减去抹零金额
  amount = $kt.decimal.sub(amount, requestParam.value.zeroAmount);
  totalAmount.value = amount;
  return amount;
};

// 监听requestParam变化
watch(
  () => requestParam,
  (val) => {
    getTotalAmount();
  },
  {
    deep: true,
  }
);

/**
 * 打开弹窗
 */
let open = (param: any) => {
  if (param) {
    requestParam.value = JSON.parse(JSON.stringify(param));
  }

  dialogVisible.value = true;
};

let emits = defineEmits(["submit"]);
let submit = (statusCode: any) => {
  if (statusCode) {
    requestParam.value.statusCode = statusCode;
  }

  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });

  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsProcureOrder/save",
      method: "post",
      data: requestParam.value,
    })
    .then((res) => {
      if (res.data.success) {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        dialogVisible.value = false;

        loading.close();
        // 提交
        emits("submit");
        requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
        dialogVisible.value = false;
        return false;
      }
      ElMessage({
        message: res.data.errMsg,
        type: "error",
      });
      loading.close();
    });
};

// 选择供应商
let goodsSupplierSelect = ref();

let goodsSupplierOfSelect = ref({
  id: null,
  name: "未选择供应商",
});

let goodsSupplierSelectSelect = (param: any) => {
  goodsSupplierOfSelect.value = param;
  requestParam.value.supplierId = param.id;
};

//选择仓库
let warehouseSelect = ref();

let warehouseSelectSelect = (val: any) => {
  requestParam.value.warehouseIds = val;
};

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.img-uploaded {
  cursor: pointer;
}

.img-uploaded:hover {
  opacity: 0.8;
}

.amount-box {
  margin-top: 20px;
  text-align: right;

  .amount {
    font-weight: bold;
    margin-left: 20px;

    .amount-value {
      color: red;
    }
  }
}

.box-2 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .dialog-label {
    font-weight: bold;
  }
}
</style>
